import {
  IFormProps,
  size,
  formItemLayout,
  getUploadResult,
  productPage,
  getImages,
  getFileList
} from "../../utils/common";
import React from "react";
import {
  Modal,
  Form,
  Input,
  Select,
  Upload,
  Checkbox,
  InputNumber
} from "antd";
import * as api from "../../api/api";
import { FormComponentProps } from "antd/lib/form";
export interface IActiveEditProps extends FormComponentProps {
  visible: boolean;
  active?: api.SingleUserMallMallVOActiveVO;
  onSave: (any) => void;
  onCancel: () => void;
}
class ActiveEdit extends React.PureComponent<IActiveEditProps, any> {
  constructor(props) {
    super(props);
  }

  state = {};

  componentDidMount() {}

  ok = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, form) => {
      if (!err) {
        this.props.onSave(form);
      }
    });
  };

  cancel = () => {
    this.props.onCancel();
  };

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { active } = this.props;
    return (
      <Modal
        title="活动详情"
        visible={this.props.visible}
        onOk={this.ok}
        onCancel={this.cancel}
        maskClosable={true}
      >
        <Form>
          <Form.Item label="名称" {...formItemLayout}>
            {getFieldDecorator("name", {
              rules: [
                {
                  required: true,
                  message: "请输入名称"
                }
              ],
              initialValue: active && active.name
            })(<Input placeholder="请输入名称" />)}
          </Form.Item>
          <Form.Item label="描述" {...formItemLayout}>
            {getFieldDecorator("description", {
              rules: [
                {
                  required: true,
                  message: "请输入描述"
                }
              ],
              initialValue: active && active.description
            })(<Input placeholder="请输入描述" />)}
          </Form.Item>
          <Form.Item label="需完成次数" {...formItemLayout}>
            {getFieldDecorator("times", {
              rules: [
                {
                  required: true,
                  message: "请输入需完成次数"
                }
              ],
              initialValue: active && active.times
            })(<InputNumber placeholder="请输入描述" min={1} max={999} />)}
          </Form.Item>
          <Form.Item label="可得体验金金额" {...formItemLayout}>
            {getFieldDecorator("amount", {
              rules: [
                {
                  required: true,
                  message: "请输入可得体验金金额"
                }
              ],
              initialValue: active && active.amount
            })(
              <InputNumber
                placeholder="请输入可得体验金金额"
                min={1}
                max={1000}
              />
            )}
          </Form.Item>
          <Form.Item label="是否启用" {...formItemLayout}>
            {getFieldDecorator("enabled", {
              valuePropName: "checked",
              initialValue: active && active.enabled
            })(<Checkbox />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(ActiveEdit);
